import React, { Component, PropTypes } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native';
import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
import fetchCollect from '../../actions/saleChanceActions';
import MyCustomerDetailContainer from '../../containers/MyCustomerDetailContainer';

class otherCustomerItem extends Component {
  static propTypes = {
    saleData: PropTypes.object,
  };
  constructor(props) {
    super(props);
    this.state = {
      otherCollect: 0,
    };
  }
  /**
  *点击收藏
  */
  collect() {
    let id = '';
    if (this.props.saleData) {
      id = this.props.saleData.id;
      if (this.state.otherCollect) {
        this.props.saleData.collect = 0;
        this.setState({ otherCollect: 0 });
      } else {
        this.props.saleData.collect = 1;
        this.setState({ otherCollect: 1 });
      }
      this.props.dispatch(fetchCollect(id, this.props.saleData.collect));
    }
  }

  _gotTodetails(id) {
    const { dispatch } = this.props;
    const userType = 'otherCustomer';
    const { saleData } = this.props;
    const user = saleData;
    this.props.navigator.navigator.push({
      component: MyCustomerDetailContainer,
      passProps: { dispatch, id, userType, user },
    });
  }

  render() {
    const { saleData } = this.props;
    let id = '';
    if (saleData && saleData.hasOwnProperty) {
      id = saleData.id;
    }

    let username = '';
    let nameImg = '';
    let sex = '男';
    let address = '';
    let loginAt = '';
    let phone = '';
    let age = '';
    let lookcar = '';
    let bookdrive = '';
    let belongTo = '';
    if (saleData) {
      username = saleData.username;
      if (username) {
        nameImg = username.substring(username.length - 2, username.length);
      }
      sex = saleData.sex === '男' ? require('../../img/home/cule-list-men.png') : require('../../img/home/cule-list-wamen.png');
      address = saleData.address;
      loginAt = saleData.login_at;
      phone = saleData.phone;
      age = saleData.age;
      lookcar = saleData.lookcar;
      bookdrive = saleData.bookdrive;
      belongTo = saleData.belong_to;
      if (saleData.collect === 1) {
        this.state = {
          otherCollect: 1,
        };
      } else {
        this.state = {
          otherCollect: 0,
        };
      }
    }

    return (
      // console.log('state: ', this.props.navigation.state.key)
      <TouchableOpacity
        activeOpacity={0.8}
        navigator={this.props.navigator}
        onPress={() => this._gotTodetails(id)}
      >
        <View style={style.wrapper}>
          <View style={style.row}>
            <View style={style.contentLeft}>
              <View style={[style.avator, { backgroundColor: saleData.color_value }]} >
                <Text style={style.avatorText}>{nameImg}</Text>
              </View>
            </View>
            <View style={style.contentMid}>
              <View style={[style.row, { alignItems: 'center' }]}>
                <View>
                  <Text style={style.name}>{ username }</Text>
                </View>
                <View style={[style.red]}>
                  <Image source={sex} />
                </View>
              </View>
              <View style={[style.row, style.contentTime]}>
                <Text style={[style.loginAt, style.textFontFamily]}>最近登录: {loginAt}</Text>
              </View>
            </View>
            <TouchableOpacity
              style={style.contentRight}
              onPress={() => this.collect()}
            >
              { this.state.otherCollect
                ?
                  <Image source={require('../../img/home/hStarFocus.png')} />
                :
                  <Image source={require('../../img/home/hStarNormal.png')} />
              }

            </TouchableOpacity>
          </View>

          <View style={[style.buyInfo, style.row, style.flexWrap]}>
            <Text style={[style.buyInfoBg, style.textFontFamily, style.buyInfoLeft]}>{phone}</Text>
            <Text style={[style.buyInfoBg, style.buyInfoLeft, style.textFontFamily]}>
              {address}
            </Text>
            <Text style={[style.buyInfoBg, style.buyInfoLeft, style.textFontFamily]}>{age}岁</Text>
            <Text style={[style.buyInfoBg, style.buyInfoLeft, style.textFontFamily]}>{saleData.has_plate ? '有车号' : '无车号'}</Text>
            <Text style={[style.buyInfoBg, style.buyInfoLeft, style.textFontFamily]}>{saleData.buy_at ? saleData.buy_at : ''}</Text>
            {
              saleData.budget_value
              ?
                <Text style={[style.buyInfoBg, style.buyInfoLeft, style.textFontFamily]}>{`预算${saleData.budget_value}左右`}</Text>
              :
              null
            }
            {
              saleData.buy_method
              ?
                <Text style={[style.buyInfoBg, style.textFontFamily]}>{saleData.buy_method}</Text>
              :
              null
            }
          </View>
          <View style={[style.row, style.carView]}>
            <Image source={require('../../img/home/cule-list-likecar.png')} />
            <Text style={[style.carText, style.car]}>关注车系：</Text>
            <Text style={style.carText}>{lookcar}</Text>
          </View>
          <View style={[style.row, style.intentView]}>
            <Image source={require('../../img/home/cule-list-likebuy.png')} />
            <Text style={[style.carText, style.car]}>
              购买意向：
            </Text>
            <Text style={style.carText}>{saleData && saleData.intention}%</Text>
          </View>
          <View style={[style.row, style.intentView]}>
            <Image source={require('../../img/home/cule-list-word.png')} />
            <Text style={[style.carText, style.car]}>
              预约试驾：
            </Text>
            <Text style={style.carText}>{bookdrive}</Text>
          </View>
          <View style={style.lineB}>
            <View style={style.lineBottom} />
          </View>
          <View style={[style.bottom, style.row]}>
            <Text style={[style.source, style.textFontFamily]}>{belongTo}的客户</Text>
            <Image
              style={style.more}
              source={require('../../img/home/cule-list-more.png')}
            />
          </View>
        </View>
      </TouchableOpacity>

    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    backgroundColor: '#fff',
    marginTop: PxToDp(10),
    paddingLeft: PxToDp(10),
    paddingRight: PxToDp(10),
  },
  row: {
    flexDirection: 'row',
  },
  contentLeft: {
    flex: 0.6,
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingLeft: PxToDp(12),
    marginTop: PxToDp(18),
  },
  avator: {
    width: PxToDp(38),
    height: PxToDp(38),
    borderRadius: PxToDp(18),
    backgroundColor: '#a978e5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatorText: {
    color: '#fff',
    fontSize: PxToDp(12),
    marginTop: PxToDp(2),
  },
  contentMid: {
    flex: 3,
    justifyContent: 'center',
    marginTop: PxToDp(18),
  },
  contentRight: {
    alignItems: 'flex-end',
    paddingRight: PxToDp(19),
  },
  name: {
    fontSize: PxToDp(15),
    color: '#000000',
  },
  contentTime: {
    marginTop: PxToDp(2),
  },
  loginAt: {
    fontSize: PxToDp(10),
    color: '#999999',
    marginTop: PxToDp(2),
  },
  textFontFamily: {
    fontFamily: FontFamilys(),
  },
  red: {
    marginLeft: PxToDp(15),
    width: PxToDp(13),
    height: PxToDp(13),
  },
  buyInfo: {
    paddingLeft: PxToDp(11),
    paddingTop: PxToDp(14),
  },
  buyInfoBg: {
    backgroundColor: '#D6CEAA',
    borderRadius: PxToDp(1),
    paddingTop: PxToDp(3),
    paddingBottom: PxToDp(3),
    paddingLeft: PxToDp(7),
    paddingRight: PxToDp(7),
    fontSize: PxToDp(12),
    color: '#FFFFFF',
    height: PxToDp(22),
    marginBottom: PxToDp(5),
  },
  buyInfoLeft: {
    marginRight: PxToDp(8),
  },
  carView: {
    paddingTop: PxToDp(11),
    paddingLeft: PxToDp(11),
  },
  intentView: {
    paddingTop: PxToDp(8),
    paddingLeft: PxToDp(11),
  },
  carText: {
    fontSize: PxToDp(13),
    color: '#121212',
    fontFamily: FontFamilys(),
  },
  bottom: {
    height: PxToDp(44),
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    paddingLeft: PxToDp(10),
    justifyContent: 'space-between',
  },
  lineB: {
    marginTop: PxToDp(21),
    width: '100%',
    paddingRight: PxToDp(10),
    paddingLeft: PxToDp(10),
  },
  lineBottom: {
    height: PxToDp(1),
    backgroundColor: '#dadada',
  },
  source: {
    fontSize: PxToDp(14),
    color: '#8B8C8E',
  },
  car: {
    marginLeft: PxToDp(9),
  },
  more: {
    marginRight: PxToDp(8),
  },
  flexWrap: {
    flexWrap: 'wrap',
  },
});
export default otherCustomerItem;
